
import { Input } from '@/components/ui/input';
import MenuToggle from '../components/MenuToggle';
import { Badge } from '@/components/ui/badge';
import { CardContent, CardHeader, Card, CardTitle } from '@/components/ui/card';
import { SelectItem, Select, SelectContent, SelectValue, SelectTrigger } from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Eye, Heart, Palette, Gift, Crown, Filter, Star, Search, Zap, Download } from 'lucide-react';
import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
const ThemeStore = ({ toggleSidebar }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [filterCategory, setFilterCategory] = useState('all');
  const [sortBy, setSortBy] = useState('popular');

  // 模拟主题商店数据
  const [themes] = useState([
    {
      id: 1,
      name: '极简白',
      description: '简洁优雅的白色主题，适合专业办公环境',
      category: 'minimal',
      price: 0,
      rating: 4.8,
      downloads: 12500,
      author: 'Design Studio',
      tags: ['简约', '白色', '专业'],
      preview: 'https://nocode.meituan.com/photo/search?keyword=minimal,white,clean&width=300&height=200',
      featured: true,
      new: false
    },
    {
      id: 2,
      name: '深夜蓝',
      description: '护眼的深色主题，完美的夜间工作伴侣',
      category: 'dark',
      price: 29,
      rating: 4.9,
      downloads: 8900,
      author: 'Night Themes',
      tags: ['深色', '护眼', '夜间'],
      preview: 'https://nocode.meituan.com/photo/search?keyword=dark,blue,night&width=300&height=200',
      featured: true,
      new: false
    },
    {
      id: 3,
      name: '森林绿',
      description: '清新自然的绿色主题，带来大自然的宁静',
      category: 'nature',
      price: 19,
      rating: 4.6,
      downloads: 5600,
      author: 'Nature Co.',
      tags: ['绿色', '自然', '清新'],
      preview: 'https://nocode.meituan.com/photo/search?keyword=forest,green,nature&width=300&height=200',
      featured: false,
      new: true
    },
    {
      id: 4,
      name: '霓虹紫',
      description: '充满科技感的紫色主题，展现未来风格',
      category: 'tech',
      price: 39,
      rating: 4.7,
      downloads: 7200,
      author: 'Cyber Themes',
      tags: ['紫色', '科技', '未来'],
      preview: 'https://nocode.meituan.com/photo/search?keyword=neon,purple,tech&width=300&height=200',
      featured: false,
      new: true
    },
    {
      id: 5,
      name: '暖阳橙',
      description: '温暖活力的橙色主题，激发创造力',
      category: 'colorful',
      price: 0,
      rating: 4.4,
      downloads: 3400,
      author: 'Warm Colors',
      tags: ['橙色', '温暖', '活力'],
      preview: 'https://nocode.meituan.com/photo/search?keyword=warm,orange,energy&width=300&height=200',
      featured: false,
      new: false
    },
    {
      id: 6,
      name: '商务灰',
      description: '专业的灰色主题，适合商务场景',
      category: 'business',
      price: 49,
      rating: 4.5,
      downloads: 9800,
      author: 'Business Pro',
      tags: ['灰色', '商务', '专业'],
      preview: 'https://nocode.meituan.com/photo/search?keyword=business,grey,professional&width=300&height=200',
      featured: true,
      new: false
    }
  ]);

  const categories = [
    { value: 'all', label: '全部分类' },
    { value: 'minimal', label: '极简风格' },
    { value: 'dark', label: '深色主题' },
    { value: 'nature', label: '自然风格' },
    { value: 'tech', label: '科技风格' },
    { value: 'colorful', label: '多彩主题' },
    { value: 'business', label: '商务风格' }
  ];

  const sortOptions = [
    { value: 'popular', label: '最受欢迎' },
    { value: 'newest', label: '最新发布' },
    { value: 'rating', label: '评分最高' },
    { value: 'downloads', label: '下载最多' },
    { value: 'price-low', label: '价格从低到高' },
    { value: 'price-high', label: '价格从高到低' }
  ];

  // 过滤和排序主题
  const filteredThemes = themes
    .filter(theme => {
      const matchesSearch = theme.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                           theme.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
                           theme.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
      const matchesCategory = filterCategory === 'all' || theme.category === filterCategory;
      return matchesSearch && matchesCategory;
    })
    .sort((a, b) => {
      switch (sortBy) {
        case 'newest':
          return b.new ? 1 : -1;
        case 'rating':
          return b.rating - a.rating;
        case 'downloads':
          return b.downloads - a.downloads;
        case 'price-low':
          return a.price - b.price;
        case 'price-high':
          return b.price - a.price;
        default:
          return b.downloads - a.downloads; // popular
      }
    });

  const featuredThemes = themes.filter(theme => theme.featured);
  const newThemes = themes.filter(theme => theme.new);

  const handleDownload = (theme) => {
    // 这里应该调用API下载主题
    console.log('下载主题:', theme.name);
    alert(`开始下载主题: ${theme.name}`);
  };

  const getPriceDisplay = (price) => {
    return price === 0 ? '免费' : `¥${price}`;
  };

  const getPriceBadge = (price) => {
    if (price === 0) {
      return <Badge className="bg-green-100 text-green-800">免费</Badge>;
    } else if (price < 30) {
      return <Badge className="bg-blue-100 text-blue-800">¥{price}</Badge>;
    } else {
      return <Badge className="bg-purple-100 text-purple-800">¥{price}</Badge>;
    }
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="mt-3">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-pink-500 to-pink-600 rounded-xl flex items-center justify-center">
                  <Download className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    主题商店
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    发现和下载精美主题
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：搜索和筛选 */}
            <div className="flex items-center space-x-3">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-material-grey-500" />
                <input
                  type="text"
                  placeholder="搜索主题..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 pr-4 py-2 w-80 border border-material-grey-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                />
              </div>

              <Select value={filterCategory} onValueChange={setFilterCategory}>
                <SelectTrigger className="w-40">
                  <Filter className="w-4 h-4 mr-2" />
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {categories.map(category => (
                    <SelectItem key={category.value} value={category.value}>
                      {category.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <Select value={sortBy} onValueChange={setSortBy}>
                <SelectTrigger className="w-40">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {sortOptions.map(option => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        <Tabs defaultValue="all" className="w-full">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="all">全部主题</TabsTrigger>
            <TabsTrigger value="featured">精选推荐</TabsTrigger>
            <TabsTrigger value="new">最新发布</TabsTrigger>
            <TabsTrigger value="free">免费主题</TabsTrigger>
          </TabsList>

          {/* 全部主题 */}
          <TabsContent value="all" className="mt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {filteredThemes.map((theme) => (
                <Card key={theme.id} className="group hover:shadow-lg transition-all duration-200">
                  <CardContent className="p-0">
                    {/* 主题预览图 */}
                    <div className="relative">
                      <img
                        src={theme.preview}
                        alt={theme.name}
                        className="w-full h-40 object-cover rounded-t-lg mx-auto"
                      />
                      <div className="absolute top-2 left-2 flex flex-col space-y-1">
                        {theme.featured && (
                          <Badge className="bg-yellow-100 text-yellow-800">
                            <Crown className="w-3 h-3 mr-1" />
                            精选
                          </Badge>
                        )}
                        {theme.new && (
                          <Badge className="bg-green-100 text-green-800">
                            <Zap className="w-3 h-3 mr-1" />
                            新品
                          </Badge>
                        )}
                      </div>
                      <div className="absolute top-2 right-2">
                        {getPriceBadge(theme.price)}
                      </div>
                      <div className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
                        <Button size="sm" variant="secondary">
                          <Eye className="w-4 h-4" />
                        </Button>
                      </div>
                    </div>

                    {/* 主题信息 */}
                    <div className="p-4">
                      <div className="flex items-start justify-between mb-2">
                        <div className="flex-1">
                          <h3 className="font-semibold text-material-grey-900 truncate">{theme.name}</h3>
                          <p className="text-sm text-material-grey-600 line-clamp-2">{theme.description}</p>
                        </div>
                        <Button variant="ghost" size="sm" className="ml-2">
                          <Heart className="w-4 h-4" />
                        </Button>
                      </div>

                      {/* 标签 */}
                      <div className="flex flex-wrap gap-1 mb-3">
                        {theme.tags.slice(0, 3).map((tag, index) => (
                          <Badge key={index} variant="secondary" className="text-xs">
                            {tag}
                          </Badge>
                        ))}
                      </div>

                      {/* 统计信息 */}
                      <div className="flex items-center justify-between text-xs text-material-grey-500 mb-3">
                        <div className="flex items-center space-x-3">
                          <span className="flex items-center">
                            <Star className="w-3 h-3 mr-1 fill-yellow-400 text-yellow-400" />
                            {theme.rating}
                          </span>
                          <span className="flex items-center">
                            <Download className="w-3 h-3 mr-1" />
                            {theme.downloads.toLocaleString()}
                          </span>
                        </div>
                        <span>by {theme.author}</span>
                      </div>

                      {/* 操作按钮 */}
                      <Button
                        onClick={() => handleDownload(theme)}
                        className="w-full bg-primary hover:bg-primary-600"
                        size="sm"
                      >
                        {theme.price === 0 ? (
                          <>
                            <Gift className="w-4 h-4 mr-2" />
                            免费下载
                          </>
                        ) : (
                          <>
                            <Download className="w-4 h-4 mr-2" />
                            ¥{theme.price} 购买
                          </>
                        )}
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          {/* 精选推荐 */}
          <TabsContent value="featured" className="mt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {featuredThemes.map((theme) => (
                <Card key={theme.id} className="group hover:shadow-lg transition-all duration-200">
                  <CardContent className="p-0">
                    <div className="relative">
                      <img
                        src={theme.preview}
                        alt={theme.name}
                        className="w-full h-48 object-cover rounded-t-lg mx-auto"
                      />
                      <div className="absolute top-2 left-2">
                        <Badge className="bg-yellow-100 text-yellow-800">
                          <Crown className="w-3 h-3 mr-1" />
                          编辑推荐
                        </Badge>
                      </div>
                      <div className="absolute top-2 right-2">
                        {getPriceBadge(theme.price)}
                      </div>
                    </div>
                    <div className="p-4">
                      <h3 className="font-semibold text-material-grey-900 mb-2">{theme.name}</h3>
                      <p className="text-sm text-material-grey-600 mb-3">{theme.description}</p>
                      <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center space-x-2">
                          <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                          <span className="text-sm font-medium">{theme.rating}</span>
                          <span className="text-xs text-material-grey-500">({theme.downloads.toLocaleString()} 下载)</span>
                        </div>
                        <span className="text-xs text-material-grey-500">by {theme.author}</span>
                      </div>
                      <Button
                        onClick={() => handleDownload(theme)}
                        className="w-full bg-primary hover:bg-primary-600"
                      >
                        {theme.price === 0 ? '免费下载' : `¥${theme.price} 购买`}
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          {/* 最新发布 */}
          <TabsContent value="new" className="mt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {newThemes.map((theme) => (
                <Card key={theme.id} className="group hover:shadow-lg transition-all duration-200">
                  <CardContent className="p-0">
                    <div className="relative">
                      <img
                        src={theme.preview}
                        alt={theme.name}
                        className="w-full h-40 object-cover rounded-t-lg mx-auto"
                      />
                      <div className="absolute top-2 left-2">
                        <Badge className="bg-green-100 text-green-800">
                          <Zap className="w-3 h-3 mr-1" />
                          新发布
                        </Badge>
                      </div>
                      <div className="absolute top-2 right-2">
                        {getPriceBadge(theme.price)}
                      </div>
                    </div>
                    <div className="p-4">
                      <h3 className="font-semibold text-material-grey-900 mb-1">{theme.name}</h3>
                      <p className="text-sm text-material-grey-600 mb-3 line-clamp-2">{theme.description}</p>
                      <div className="flex items-center justify-between text-xs text-material-grey-500 mb-3">
                        <span className="flex items-center">
                          <Star className="w-3 h-3 mr-1 fill-yellow-400 text-yellow-400" />
                          {theme.rating}
                        </span>
                        <span>{theme.downloads.toLocaleString()} 下载</span>
                      </div>
                      <Button
                        onClick={() => handleDownload(theme)}
                        className="w-full bg-primary hover:bg-primary-600"
                        size="sm"
                      >
                        {theme.price === 0 ? '免费下载' : `¥${theme.price} 购买`}
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          {/* 免费主题 */}
          <TabsContent value="free" className="mt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {themes.filter(theme => theme.price === 0).map((theme) => (
                <Card key={theme.id} className="group hover:shadow-lg transition-all duration-200">
                  <CardContent className="p-0">
                    <div className="relative">
                      <img
                        src={theme.preview}
                        alt={theme.name}
                        className="w-full h-40 object-cover rounded-t-lg mx-auto"
                      />
                      <div className="absolute top-2 left-2">
                        <Badge className="bg-green-100 text-green-800">
                          <Gift className="w-3 h-3 mr-1" />
                          免费
                        </Badge>
                      </div>
                    </div>
                    <div className="p-4">
                      <h3 className="font-semibold text-material-grey-900 mb-1">{theme.name}</h3>
                      <p className="text-sm text-material-grey-600 mb-3 line-clamp-2">{theme.description}</p>
                      <div className="flex items-center justify-between text-xs text-material-grey-500 mb-3">
                        <span className="flex items-center">
                          <Star className="w-3 h-3 mr-1 fill-yellow-400 text-yellow-400" />
                          {theme.rating}
                        </span>
                        <span>{theme.downloads.toLocaleString()} 下载</span>
                      </div>
                      <Button
                        onClick={() => handleDownload(theme)}
                        className="w-full bg-green-600 hover:bg-green-700"
                        size="sm"
                      >
                        <Gift className="w-4 h-4 mr-2" />
                        免费下载
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>
        </Tabs>

        {/* 空状态 */}
        {filteredThemes.length === 0 && (
          <div className="text-center py-12">
            <div className="w-24 h-24 mx-auto mb-4 bg-material-grey-200 rounded-full flex items-center justify-center">
              <Palette className="w-8 h-8 text-material-grey-500" />
            </div>
            <h3 className="text-lg font-medium text-material-grey-700 mb-2">
              未找到匹配的主题
            </h3>
            <p className="text-material-grey-500">
              尝试使用不同的关键词或筛选条件
            </p>
          </div>
        )}
      </div>
    </>
  );
};

export default ThemeStore;
